<template>
  <f7-page>
    <f7-navbar title="吉林动画学院会议申请表"></f7-navbar>
    <f7-list inline-labels no-hairlines-md >
      <f7-list-item>
        <f7-label>名称</f7-label>
        <f7-input type="text" required :value="formContent.title" @input="formContent.title = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>申请部门</f7-label>
        <f7-input type="select" required placeholder="Please choose..." :value="formContent.orgName"
                  @input="formContent.orgName = $event.target.value">
          <option v-for="item in orgNames" v-bind:key="item.id" v-bind:value="item.name">{{item.name}}</option>
        </f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>会议地点</f7-label>
        <f7-input type="select" required validate placeholder="Please choose..." :value="formContent.meetingroomName"
                  @input="formContent.meetingroomName = $event.target.value">
          <option v-for="item in meetingRooms" v-bind:key="item.id" v-bind:value="item.name">{{item.name}}</option>
        </f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>会议议题</f7-label>
        <f7-input type="text"  :value="formContent.meetingTopic"   @input="formContent.meetingTopic = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>会议议程</f7-label>
        <f7-input type="textarea"   :value="formContent.meetingAgenda"
                  @input="formContent.meetingAgenda = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>开始时间</f7-label>
        <f7-input type="datetime-local"   :value="formContent.beginTime" @input="formContent.beginTime = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>结束时间</f7-label>
        <f7-input type="datetime-local" :value="formContent.endTime"     @input="formContent.endTime = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item >
        <f7-label>会议类型</f7-label>
        <f7-input type="select" placeholder="Please choose..."  v-bind:value="meetingType"    @input="meetingType = $event.target.value">
          <option v-for="(item,idx) in meetingTypeNum" v-bind:key="idx" v-bind:value="item"> {{item}} </option>
        </f7-input>
      </f7-list-item>

      <f7-list-item  title="会议纪要人员"  link="#" @click="popOpen=true; noticeRcdP()">  </f7-list-item>

      <f7-list-item title="重要出席人"  link="#" @click="popOpen=true;noticeIptP()"  ></f7-list-item>

      <f7-list-item  title="其他出席人" link="#" @click="popOpen=true;noticeOthP()" >
      </f7-list-item>

    </f7-list>

    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised @click="submitApply">提交</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised back>取消</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-popup class="demo-popup" :opened="popOpen" @popup:closed="popOpen=false">
      <f7-page>
        <f7-navbar title="人员查询" >
          <f7-nav-right>
            <f7-link popup-close>Close</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-searchbar custom-search id="schr" @searchbar:search="doSearchNames"></f7-searchbar>
        <f7-list inline-labels no-hairlines-md >
          <f7-list-item v-show="nameFinder.caller == 1">
            <f7-input type="textarea" resizable :value="formContent.meetingSummaryPersonName" :disabled="true" :clear-button="true"
                      @input:clear="formContent.meetingSummaryPersonName=''; formContent.meetingSummaryPerson = ''" ></f7-input>
          </f7-list-item>
            <f7-list-item v-show="nameFinder.caller == 2">
              <f7-input type="textarea" resizable :value="formContent.importantAttendeesName" :disabled="true" :clear-button="true"
                        @input:clear="formContent.importantAttendeesName=''; formContent.importantAttendees=''" ></f7-input>
            </f7-list-item>
            <f7-list-item v-show="nameFinder.caller == 3">
              <f7-input type="textarea" resizable :value="formContent.otherAttendeesName" :disabled="true" :clear-button="true"
                        @input:clear="formContent.otherAttendeesName=''; formContent.otherAttendees='' "></f7-input>
            </f7-list-item>
        </f7-list>
        <f7-list >
          <f7-list-item radio  name="opt" v-for=" item in nameFinder.searchNames" v-bind:key="item.id" v-bind:value="item.id"
                        v-bind:title="item.name" @change="noticeSelect($event.target.value)"></f7-list-item>
        </f7-list>

      </f7-page>
    </f7-popup>


  </f7-page>
</template>

<script>
  export default {
    name: "applyMeetingTable",
    data() {
      return {
        userId: sessionStorage.getItem('userId'),
        popOpen: false,
        orgNames: this.GLOBAL.orgNames,
        meetingRooms: this.GLOBAL.meetingRooms,
        meetingTypeNum: this.GLOBAL.meetingTypeNum,
        meetingType:"",
        nameFinder: {
          searchNames: [],
          caller:0,
        },

        pastMemory: {},
        formContent: {
          title: "吉林动画学院会议申请表",
          createBy: sessionStorage.getItem('userName'),
          orgName: "动画工程中心",
          orgId: 0,
          beginTime: "",
          endTime: "",
          meetingAgenda: "",
          meetingTopic: "",
          meetingType: 0,
          meetingroomName: "",
          meetingroomId: 0,

          otherAttendees: "",
          otherAttendeesName: "",

          importantAttendees: "",
          importantAttendeesName: "",

          meetingSummaryPerson: "",
          meetingSummaryPersonName: "",
        },
        columnName: {
          meetingType: "meetingType",
          meetingroomName: "meetingroomName",
          orgName: "orgName",
        }
      }
    },
    created() {
      this.$f7ready((f7) => {
        let that = this;
        f7.request.setup({
          headers: {
            'AccessToken': sessionStorage.getItem('accessToken'),
            'JSESSIONID': sessionStorage.getItem('userToken'),
          }
        });
        if (that.$f7route.params.id > -1) {
          f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys', {
            'page': 1,
            'limit': 10,
            'jsonStr': '',
            'otherStr': '',
            'start': '0'
          }, function (result) {
            if (result.totalCount > 0) {
              for (let pm of result.data) {
                if (pm.id == that.$f7route.params.id) {
                  that.pastMemory = pm;
                  break;
                }
              }
              if (Object.keys(that.pastMemory).length === 0) {
                return;
              } else {
                that.formContent.title = that.pastMemory.title;
                that.formContent.createBy = that.pastMemory.createBy;
                that.formContent.createById = that.pastMemory.createById;

                that.formContent.orgName = that.pastMemory.orgName;
                that.formContent.orgId = that.pastMemory.orgId;

                that.formContent.meetingAgenda = that.pastMemory.meetingAgenda;
                that.formContent.meetingTopic = that.pastMemory.meetingTopic;

                that.formContent.beginTime = that.pastMemory.beginTime.replace(' ', 'T');
                that.formContent.endTime = that.pastMemory.endTime.replace(' ', 'T');

                that.formContent.meetingType = that.pastMemory.meetingType;
                that.meetingType = that.meetingTypeNum[that.formContent.meetingType];

                that.formContent.meetingroomName = that.pastMemory.meetingroomName;
                that.formContent.meetingroomId = that.pastMemory.meetingroomId;
                that.formContent.otherAttendees = that.pastMemory.otherAttendees;
                that.formContent.otherAttendeesName = that.pastMemory.otherAttendeesName;
                that.formContent.importantAttendees = that.pastMemory.importantAttendees;
                that.formContent.importantAttendeesName = that.pastMemory.importantAttendeesName;
                that.formContent.meetingSummaryPerson = that.pastMemory.meetingSummaryPerson;
                that.formContent.meetingSummaryPersonName = that.pastMemory.meetingSummaryPersonName;
              } ;
            }
          })
        }

      });
    },
    methods: {
      submitApply: function (event) {
        let that = this;
        let ff = that.formContent;
        let app = that.$f7;

        if(that.checkValidate() == false) {
          return ;
        }
        that.findNameById(that.columnName.orgName, that.formContent.orgName)
        that.formContent.beginTime = that.formContent.beginTime.replace('T', ' ') + ":00"
        that.formContent.endTime = that.formContent.endTime.replace('T', ' ') + ":00"
        that.findNameById(that.columnName.meetingType, "");
        that.findNameById(that.columnName.meetingroomName, that.formContent.meetingroomName);

        if (Object.keys(that.pastMemory).length === 0) {
          app.request.postJSON(that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys', ff, function (result) {
            that.showAlert("提示", result.msg)
            console.log("submitApply: function (event)  123")
          }, function (err) {
            app.dialog.alert(err.msg, "提示");
            console.log("submitApply: function (event)")
          });
        } else {
          ff.id = that.pastMemory.id;
          let url = that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys/' + that.pastMemory.id;
          that.putRequest(url, ff);
        }
      },
      showAlert: function (title, text) {
        let that = this;
        let app = that.$f7;
        app.dialog.alert(text, title, () => {
          that.$f7router.back();
        });
      },
      putRequest: function (url, cargo) {
        let that = this;
        fetch(url,
          {
            method: "put",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken'),
            },
            body: JSON.stringify(cargo)
          }).then(response => response.json())
          .then(result => {
            console.log(result)
            that.showAlert("提示", result.msg)
          }).catch(function (err) {
          console.log("Fetch错误", err)
        });
      },
      isIncludeInStr: function (longStr, item) {
        let towel = longStr.split(',');
        for(let i in towel) {
          if(i.localeCompare(item) == 0){
            return true;
            break;
          }
        }
        return false
      },
      noticeIptP: function() {
        this.nameFinder.caller = 2
      },
      noticeOthP: function(){
        this.nameFinder.caller = 3
      },
      noticeRcdP: function() {
        this.nameFinder.caller = 1
      },
      noticeSelect: function(id) {
        let that = this;
        let app = that.$f7;
        let sName = that.findUserNameById(id);
        switch(that.nameFinder.caller){
          case 1:
            that.formContent.meetingSummaryPerson =  id;
            that.formContent.meetingSummaryPersonName =  sName;
            break;
          case 2:
            if(that.isIncludeInStr(that.formContent.importantAttendeesName, sName) ) {
              break;
            }
            if (that.formContent.importantAttendees.length == 0) {
              that.formContent.importantAttendees =   id;
              that.formContent.importantAttendeesName = sName;
            }else {
              that.formContent.importantAttendees += "," +  id;
              that.formContent.importantAttendeesName += "," +  sName;
            }
            break;
          case 3:
            if(that.isIncludeInStr(that.formContent.otherAttendeesName, sName)) {
              break;
            }
            if (that.formContent.otherAttendees.length == 0) {
              that.formContent.otherAttendees =   id;
              that.formContent.otherAttendeesName = sName;
            } else {
              that.formContent.otherAttendees += "," +  id;
              that.formContent.otherAttendeesName += "," +  sName;
            }
            break;
        }
       // that.nameFinder.searchNames = [];
        app.searchbar.clear()
        that.popOpen = false;
      },
      findUserNameById: function (id) {
        let that = this;
        for (let item of that.nameFinder.searchNames) {
          if (item.id == id) {
            return item.name;
            break;
          }
        }
        return;
      },
      findNameById: function(columnName, name ) {
        let that = this;
        switch(columnName ) {
          case that.columnName.meetingType:
            for (let idx = 0; idx < that.meetingTypeNum.length; idx++) {
              let v = that.meetingTypeNum[idx];
              if(v.localeCompare(that.meetingType) == 0){
                that.formContent.meetingType = idx;
                console.log("break meetingType: " + that.formContent.meetingType)
                return;
              }
              console.log("meetingType: " + v + " " + idx)
            }
            that.formContent.meetingType = 0;
            break;
          case that.columnName.orgName:
            for (let v of that.orgNames) {
              if(v.name.localeCompare(name) == 0) {
                that.formContent.orgId = v.id;
                that.formContent.orgName = v.name;
                console.log("orgName: " + that.formContent.orgName)
                return;
              }
            }
            that.formContent.orgId = 0;
            that.formContent.orgName = "";
            break;
          case that.columnName.meetingroomName:
            for (let v of that.meetingRooms) {
              that.formContent.meetingroomId = v.id;
              that.formContent.meetingroomName = v.name;
              console.log("meetingroomName: " + that.formContent.meetingroomName)
              return;
            }
            that.formContent.meetingroomId = 0;
            that.formContent.meetingroomName = "";
            break;
        }
      },
      doSearchNames: function (query) {
        let that = this;
        let app = that.$f7;
        let name = query.value
        that.nameFinder.searchNames = [];
        that.nameFinder.searchResult = [];
        if (name.length < 1) return

        app.request.json(that.GLOBAL.RequestAddress + '/camel/rest/users', {
          'page': 1,
          'limit': 10,
          'jsonStr': '{"%name%" : "' + name + '"}',
          'otherStr': '',
          'start': '0'
        }, function (result) {
          console.log("mess:" + result.totalCount)
          if (result.totalCount > 0) {
            that.nameFinder.searchNames = result.data;
          }
        });
        document.activeElement.blur();
      },
      checkValidate: function () {
        let that = this;
        let app = that.$f7;

        if(that.formContent.meetingroomName.length < 1) {
          app.dialog.alert("请填写会议地点", "提示", null);   return false
        } else if (that.formContent.meetingTopic.length < 1) {
          app.dialog.alert("请填写会议议题", "提示", null);   return false
        } else if (that.formContent.meetingAgenda.length < 1) {
          app.dialog.alert("请填写会议议程", "提示", null);   return false
        } else if(that.formContent.beginTime.length < 1) {
          app.dialog.alert("请填写开始时间", "提示", null);   return false
        } else if(that.formContent.endTime.length < 1) {
          app.dialog.alert("请填写结束时间", "提示", null);   return false
        } else if(that.meetingType.length<1 ) {
          app.dialog.alert("请填写会议类型", "提示", null);   return false
        }
        return true;
      }
    },
  }
</script>

<style scoped>

</style>
